<template>
	<div class="right-cps-view">
		<div class="tbs-view">
			<el-button type="primary">{{ $t("message.planView.title") }}</el-button>
		</div>

		<!-- content -->
		<div class="container">
			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t("message.planView.Ext_1.label_1") }}
					</div>
					<el-select v-model="editInfo.screenObj" class="long-ipt" placeholder=" ">
						<el-option v-for="item in allSelectList.screenObjList" :key="item.key" :label="item.label"
							:value="item.label">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t("message.planView.Ext_1.label_2") }}
					</div>
					<el-select v-model="editInfo.screenStart" class="ipt mar10" placeholder=" " :disabled="isTimeBtn">
						<el-option v-for="(item, index) in allSelectList.screenStart" :key="index" :label="item"
							:value="item">
						</el-option>
					</el-select>

					<span style="display: inline-block;margin:0 20px;font-size:22px;"> ~ </span>
					<el-select v-model="editInfo.screenEnd" class="ipt mar10" placeholder=" " :disabled="isTimeBtn">
						<el-option v-for="(item, index) in allSelectList.screenEnd" :key="index" :label="item"
							:value="item">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t("message.planView.Ext_1.label_3") }}
					</div>
					<el-select v-model="editInfo.uncheckedPeriod" class="ipt mar10" placeholder=" ">
						<el-option v-for="(item, index) in allSelectList.uncheckedPeriod" :key="index" :label="item"
							:value="item">
						</el-option>
					</el-select>
					<span>年</span>
				</div>
			</div>


			<div class="row spb border-top">
				<div class="item">
					<div class="label">
						{{ allSelectList.deviceLabel }}
					</div>

					<el-input v-model="editInfo.macNumb" class="ipt long-ipt" style="width:calc(100% - 89px)"
						@input="editInfo.macNumb = $setMaxLength(editInfo.macNumb, 20)"></el-input>
				</div>
			</div>


			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t("message.planView.Ext_1.label_5") }}
					</div>
					<el-select v-model="editInfo.ctgCode" class="long-ipt" placeholder=" ">
						<el-option v-for="item in allSelectList.ctgList" :key="item.key" :label="item.label"
							:value="item.label">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t("message.planView.Ext_1.label_6") }}
					</div>
					<el-select v-model="editInfo.lawCode" class="long-ipt" placeholder=" ">
						<el-option v-for="item in allSelectList.lawList" :key="item.key" :label="item.label"
							:value="item.label">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t("message.planView.Ext_1.label_7") }}
					</div>
					<el-select v-model="editInfo.impCode" class="long-ipt" placeholder=" ">
						<el-option v-for="item in allSelectList.impList" :key="item.key" :label="item.label"
							:value="item.label">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t("message.planView.Ext_1.label_9") }}
					</div>
					<el-select v-model="editInfo.corrList" class="long-ipt" placeholder=" ">
						<el-option v-for="item in allSelectList.corrList" :key="item.key" :label="item.label"
							:value="item.label">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t("message.planView.Ext_1.label_10") }}
					</div>
					<el-select v-model="editInfo.insPurposeList" class="long-ipt" placeholder=" ">
						<el-option v-for="item in allSelectList.insPurposeList" :key="item.key" :label="item.label"
							:value="item.label">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t("message.planView.Ext_1.label_11") }}
					</div>

					<el-input v-model="editInfo.InsPos" class="ipt long-ipt" style="width:calc(100% - 89px)"
						@input="editInfo.InsPos = $setMaxLength(editInfo.InsPos, 200)"></el-input>
				</div>
			</div>

			<!-- <div class="row spb">
				<div class="item">
					<div class="label">
						検査位置
					</div>
					<el-select
						v-model="wrkClsListData[0].label"
						class="long-ipt"
						placeholder=" "
					>
						<el-option
							v-for="item in wrkClsListData"
							:key="item.key"
							:label="item.label"
							:value="item.label"
						>
						</el-option>
					</el-select>
				</div>
			</div> -->

		</div>

		<!-- footer -->
		<footer class="footer-view">
			<el-button @click="clearData">{{ $t("message.planView.btn.clear") }}</el-button>
			<el-button type="primary" @click="AddVisualDetailPlanUserCodSource">{{ $t("message.planView.btn.get")
				}}</el-button>
			<el-button type="warning" @click="onCloseClick">
				{{ $t("message.public.close") }}
			</el-button>
		</footer>
	</div>
</template>

<script>
import { GetVisualDetailPlanCodSource, GetVisualDetailPlanUserCodSource, AddVisualDetailPlanUserCodSource } from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";
import { getCookie } from "@/utils/cookie";
import BASE from '@/utils/base'


export default {
	name: "PlanConditions",
	props: {
		timeFlg: Number
	},
	data() {
		return {
			upJson: {},
			editInfo: {
				Acc: getLocalStorage("userName"),
				screenObj: "",
				screenStart: "",
				screenEnd: "",
				uncheckedPeriod: "",
				macNumb: "",
				ctgCode: "",
				lawCode: "",
				impCode: "",
				// wrkClsCode: "",
				corrList: "",
				insPurposeList: "",
				InsPos: ''
			},
			allSelectList: [],
			isTimeBtn: true,


			timeFormat: "yyyy-MM",

			time: "2022-2",

			checked: false,
			GSData: [
				{
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}
			],
			wrkClsListData: [
				{
					key: 9,
					label: "Ｍ／Ｈ開放"
				}, {
					key: 10,
					label: "開放"
				}, {
					key: 11,
					label: "359"
				},
			]
		};
	},
	components: {
	},
	computed: {
	},
	watch: {
		editInfo: {
			immediate: true,
			deep: true,
			handler(nVal) {
				console.log(nVal)
				if (nVal.screenObj) {
					this.isTimeBtn = false;
				} else {
					this.isTimeBtn = true;
					this.editInfo.screenStart = '';
					this.editInfo.screenEnd = '';
				}
				if (nVal.screenStart != '') {
					this.GetVisualDetailPlanCodSourceApi(nVal.screenStart, true)
				}
			},
		},
	},
	methods: {
		clearData() {
			console.log('clear')
			this.editInfo = {
				Acc: getLocalStorage("userName"),
				screenObj: "",
				screenStart: "",
				screenEnd: "",
				uncheckedPeriod: "",
				macNumb: "",
				ctgCode: "",
				lawCode: "",
				impCode: "",
				// wrkClsCode: "",
				corrList: "",
				insPurposeList: "",
				InsPos: ""
			}
		},
		//1.获取下拉列表
		async GetVisualDetailPlanCodSourceApi(ScreenStart = '', isReturn = false) {
			let dataJson = {
				PltCode: this.$store.state.pltCode == '' ? 0 : this.$store.state.pltCode,
				ScreenStart,
				DateType: this.timeFlg, //年月类型 0=年 1=月
				MacType: this.$store.state.macType == '' ? 0 : this.$store.state.macType,
			}
			let res = await GetVisualDetailPlanCodSource(dataJson);
			if (res.data.code != 0) {
				this.$message({
					type: 'error',
					message: res.data.msg
				})
				return
			}
			this.allSelectList = res.data.data;
			console.log(res, "获取下拉列表")
			if (isReturn) return
			this.GetVisualDetailPlanUserCodSourceApi();
		},
		//2.获取用户配置--》渲染
		async GetVisualDetailPlanUserCodSourceApi() {
			let dataJson = {
				Acc: getLocalStorage("userName")
			}
			let res = await GetVisualDetailPlanUserCodSource(dataJson);
			console.log(res, " 用户配置 ")
			res.data.data.forEach((i, v) => {
				if (i.key == "C02") {
					this.editInfo.screenObj = this._getVal(i.label, this.allSelectList.screenObjList);
				}
				if (i.key == "C03") {
					this.editInfo.screenStart = i.label || '';
				}
				if (i.key == "C04") {
					this.editInfo.screenEnd = i.label || '';
				}
				if (i.key == "C05") {
					this.editInfo.uncheckedPeriod = this.allSelectList.uncheckedPeriod[Number(i.label)];
				}
				if (i.key == "C06") {
					this.editInfo.macNumb = i.label;
				}
				if (i.key == "C07") {
					this.editInfo.ctgCode = this._getVal(i.label, this.allSelectList.ctgList);
				}
				if (i.key == "C08") {
					this.editInfo.lawCode = this._getVal(i.label, this.allSelectList.lawList);
				}
				if (i.key == "C09") {
					this.editInfo.impCode = this._getVal(i.label, this.allSelectList.impList);
				}
				if (i.key == "C10") {
					this.editInfo.corrList = this._getVal(i.label, this.allSelectList.corrList);
				}

				if (i.key == "C11") {
					this.editInfo.insPurposeList = this._getVal(i.label, this.allSelectList.insPurposeList);
				}
				if (i.key == "C12") {
					this.editInfo.InsPos = i.label;
				}

			})
		},
		//3修改裴永顾配置
		AddVisualDetailPlanUserCodSource() {
			this.AddVisualDetailPlanUserCodSourceApi(false)
		},
		async AddVisualDetailPlanUserCodSourceApi(flg) {
			let upJson = {
				Acc: getLocalStorage("userName"),
				ScreenStart: this.editInfo.screenStart || '',
				ScreenEnd: this.editInfo.screenEnd || '',
				// MacNumb: this.$store.state.macNameb,
			};
			upJson.screenObj = this._getKey(this.editInfo.screenObj, this.allSelectList.screenObjList) || 0;
			upJson.uncheckedPeriod = this._getKey(this.editInfo.uncheckedPeriod, this.allSelectList.uncheckedPeriod) || 0;
			upJson.ctgCode = this._getKey(this.editInfo.ctgCode, this.allSelectList.ctgList) || 0;
			upJson.lawCode = this._getKey(this.editInfo.lawCode, this.allSelectList.lawList) || 0;
			upJson.impCode = this._getKey(this.editInfo.impCode, this.allSelectList.impList) || 0;
			// upJson.wrkClsCode = this._getKey(this.editInfo.wrkClsCode, this.allSelectList.wrkClsList) || 0;

			upJson.CrrCode = this._getKey(this.editInfo.corrList, this.allSelectList.corrList) || 0;
			upJson.InsPurCode = this._getKey(this.editInfo.insPurposeList, this.allSelectList.insPurposeList) || 0;
			upJson.InsPos = this.editInfo.InsPos || '';


			upJson.macNumb = this.editInfo.macNumb || '';
			console.log(upJson, " 保存数据")
			if (flg) {
				upJson = {
					Acc: getLocalStorage("userName"),
					ScreenStart: '',
					ScreenEnd: '',
					screenObj: 0,
					uncheckedPeriod: 0,
					ctgCode: 0,
					lawCode: 0,
					impCode: 0,
					CrrCode: 0,
					InsPurCode: 0,
					InsPos: '',
					macNumb: '',
				}
			}
			let res = await AddVisualDetailPlanUserCodSource(upJson);
			if (res.data.code != 0) {
				this.$message({
					type: 'error',
					message: res.data.msg
				})
				return
			}
			this.$emit("CloseRightTables");
			this.$message({
				type: 'success',
				message: 'OK'
			})
			console.log(res, " 保存 ")
			//重新获取下拉-用户配置并重新获取表格内容
			this.GetVisualDetailPlanCodSourceApi();
			this.$emit("reGetMSTableInfo");
		},


		onCloseClick() {
			this.$emit("CloseRightTables");
		},
		_getKey(str, arr) {
			let result;
			arr.forEach((i, v) => {
				if (i.label) {
					if (str == i.label) {
						result = i.key
					}
				} else {
					if (str == i) {
						result = v
					}
				}
			})
			return result
		},
		_getVal(k, arr) {
			let result;
			arr.forEach((i, v) => {
				if (k == i.key) {
					result = i.label
				}
			})
			return result
		}
	},
	created() {
	},
	mounted() {


		if (BASE.IP == "http://192.168.33.200:8085") {
			this.timeFormat = "yyyy-MM";
		} else if (BASE.IP == "https://eng-dev-api.a-mis.com") {
			this.timeFormat = "MM-yyyy";
		} else if (BASE.IP == "https://demoapi.richtechcn.com") {
			this.timeFormat = "yyyy-MM";
		}
	},
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-cps-view {
	width: 100%;
	height: calc(100% - 2px);
	padding: 16px 0;
	border: 1px solid #c3c3c3;
}

.tbs-view {
	padding: 0 16px;

	button {
		width: 50% !important;
		height: 32px;
		text-align: center;
		border: 1px solid #d3d3d3;
		background: #106ebe;
		color: #fff;
		line-height: 0;
		border-radius: 0;
	}
}

.list {
	margin-bottom: 30px;

	::v-deep .elx-cell--title {
		margin: 0 auto;
	}

	.mark_whole {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		margin: 0 auto;
	}

	.mark_half {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		border: 2px solid black;
		margin: 0 auto;
	}

	.mark_shut {
		width: 15px;
		height: 3px;
		// border-radius: 50%;
		background-color: black;
		margin: 0 auto;
	}

	::v-deep .elx-cell--title .elx-checkbox--icon::before {
		display: none;
	}
}

.row {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	padding: 10px 0;
	align-items: center;

	.item {
		width: 48%;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.label {
			width: 89px;
			min-width: 89px;
			height: 32px;
			display: flex;
			align-items: center;
		}

	}

	.w130 {
		max-width: 130px;
		min-width: 130px;
		width: 130px;
	}

	button {
		width: 68px;
		height: 32px;
		line-height: 32px;
		background: #ffffff;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
	}

	.fb {
		display: flex;
		justify-content: space-between !important;
	}
}

.alits {
	align-items: flex-start !important;
}

.ipt {
	width: 182px;
	height: 32px;

	::v-deep .el-input {
		width: 100%;
	}

	::v-deep .el-input__inner {
		width: 182px;
		height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		right: 0;
		background: #dee0e3;
	}
}

.long-ipt {
	width: 427px;
	min-width: 427px;
	height: 32px;

	::v-deep .el-input--suffix {
		width: 100%;
	}

	::v-deep .el-input__inner {
		width: 100%;
		height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		right: 0;
		background: #dee0e3;
	}

	::v-deep .el-icon-time:before {
		content: "";
		display: block;
		transform: translateY(-3px);
	}

	::v-deep .el-range-separator {
		transform: translateY(-3px);
	}
}

.long {
	width: 460px;
	min-width: 460px;
}

::v-deep .el-picker-panel__footer {
	background-color: red;
}

.orange {
	::v-deep .el-input__inner {
		background: #ffdeac;
	}
}



.container {
	width: 100%;
	height: calc(100% - 32px);
	overflow-y: scroll;
	padding: 12px 8px 28px 16px;

	.add-view {
		width: 100%;
		padding-bottom: 12px;
		border-bottom: 1px solid #d9d9d9;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 12px;

		button {
			width: 68px;
			height: 32px;
			background: #ffffff;
			border: 1px solid #d9d9d9;
			margin-left: 12px;
			border-radius: 4px;
		}
	}
}

.radio-view {
	width: 238px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid #d9d9d9;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 3px;

	::v-deep .el-radio {
		width: 35%;
	}
}

.textarea {
	::v-deep .el-textarea__inner {
		resize: none;
		// background: #ffffe1;
	}
}

.footer-view {
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 47px;
	padding: 0 15px;
	border-top: 1px solid #d9d9d9;
	display: flex;
	align-items: center;
	background: #ffffff;

	button {
		min-width: 82px;
		height: 32px;

		// border: 1px solid #d9d9d9;
		margin-right: 12px;
		border-radius: 4px;
		line-height: 0;
	}

	button:nth-child(2) {
		// background: #106ebe;
		// color: #fff;
		padding: 0 15px;
	}

	button:nth-child(3) {
		position: absolute;
		// background: #eb7421;
		// color: #fff;
		right: 0px;
	}
}

.center {
	text-align: center !important;
}

.w48 {
	width: 48px !important;
	min-width: 48px !important;

	::v-deep .el-input__inner {
		width: 100%;
		height: 32px;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
}

.b700 {
	font-weight: 700;
}

.spb {
	justify-content: space-between !important;
}

.ii ::v-deep .el-input__suffix {
	display: none;
}

::v-deep .el-icon-date {
	// background-color: red;
	float: right;
	transform: translateX(120px);
}

::v-deep .el-date-editor .el-input__inner {
	padding-left: 15px !important;
}

::v-deep .row--current {
	background-color: rgb(233, 236, 237) !important;
}

.mar10 {
	margin-right: 10px;
}

.border-top {
	border-top: 1px solid #f0f0f0;
}

.border-bottom {
	border-bottom: 1px solid #f0f0f0;
}

.border-left {
	border-left: 1px solid #f0f0f0;
}

.border-right {
	border-right: 1px solid #f0f0f0;
}
</style>